<!-- <template>
	<view>
		<view class="user_top">
			<view class="left">
				<u-image width="140rpx" height="140rpx" shape="circle" :src="avatar"></u-image>
				<view class="text" @click="showPopup">{{name || "点击登录"}}</view>
			</view>
			<u-icon @click="handleClickIcon" :name="token?'close':'arrow-right'" color="#fff"></u-icon>
		</view>
		<u-popup v-model="popupVisible" mode="center">
			<view>
				<u-form :model="form" ref="uForm" labelWidth="100">
					<u-form-item label="姓名" prop="name">
						<u-input v-model="form.name" />
					</u-form-item>
					<u-form-item label="密码" prop="password">
						<u-input v-model="form.password" />
					</u-form-item>
				</u-form>
				<u-button @click="submit">提交</u-button>
			</view>
		</u-popup>
		<u-modal title="提示" content="是否确定退出登陆" :closeOnClickOverlay="true" showCancelButton @cancel="closeModal"
			@close="closeModal" @confirm="handleLogOut">
		</u-modal>
	</view>
</template>

<script>
	import {
		apiIndex
	} from "../../util/api.js";
	const defaultAvatar =
		""
	export default {
		data() {
			return {
				avatar: defaultAvatar,
				popupVisible: false,
				token: "",
				name: "",
				form: {
					name: "",
					password: ""
				},
				rules: {
					name: [{
						required: true,
						message: "请输入姓名",
						// 可以单个或者同时写两个触发验证方式
						trigger: ["change", "blur"],
					}],
					password: [{
						required: true,
						message: "请输入密码",
						// 可以单个或者同时写两个触发验证方式
						trigger: ["change", "blur"],
					}]
				}
			}
		},
		onLoad() {
			this.$request({
				url: "index/index",
				successCb: (res) => {
					console.log(res)
				},
				failCb: () => {
					console.log("failed");
				}
			});
		},
		onShow() {
			let token = uni.getStorageSync("token");
			let userInfo = uni.getStorageSync("userInfo");
			if (token && userInfo) {
				let {
					avatar,
					username
				} = userInfo;
				this.avatar = userInfo.avatar;
				this.name = userInfo.username;
				this.token = token
			}
		},
		methods: {
			showPopup() {
				if (!this.token) {
					this.popupVisible = true
					// DOM的更新回调
					this.$nextTick(() => {
						console.log(this.$refs.uForm);
						this.$refs.uForm.setRules(this.rules);
					})
				}
			},
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						console.log("验证通过");
						this.$request({
							url: "auth/loginByWeb",
							method: "POST",
							data: {
								username: this.form.name,
								pwd: this.form.password
							},
							successCb: res => {
								let {
									token,
									userInfo
								} = res
								let {
									avatar,
									username
								} = userInfo;
								uni.setStorageSync("token", token)
								uni.setStorageSync("userInfo", userInfo)
								// this.$refs.uForm.resetFields() //微信小程序不支持
								this.form.name = ""
								this.form.password = ""
								this.popupVisible = false
								this.avatar = avatar
								this.name = username
								this.token = token
							}
						})
					} else {
						console.log("验证失败")
					}
				});
			},
			handleClickIcon() {
				if (this.token) {
					// 点击进行退出登录二次确认
					uni.showModal({
						title: "提示",
						content: "是否确认退出登录",
						confirmColor: "#fcf",
						success: (res) => {
							if (res.confirm) {
								console.log("用户点击确定");
								uni.clearStorageSync() //清空所有缓存
								// 回复初始值
								this.token = ""
								this.name = ""
								this.avatar = defaultAvatar
							} else if (res.cancel) {
								console.log("用户点击取消");
							}
						}
					});
				} else {
					this.showPopup()
				}
			}
		}
	}
</script>

<style lang="scss">
	.user_top {
		background: #333;
		color: #fff;
		padding: 40rpx 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.left {
			display: flex;
			align-items: center;

			.text {
				font-size: 26rpx;
				line-height: 3;
				margin-left: 20rpx;
			}
		}
	}

	/deep/ .u-mode-center-box {
		width: 90% !important;
		padding: 50rpx;
	}
</style> -->
<template>
	<view>
		<view class="user_top">
			<view class="left">
				<u-image width="140rpx" height="140rpx" shape="circle" :src="avatar"></u-image>
				<view class="text" @click="showPopup">{{name || '点击登录'}}</view>
			</view>
			<u-icon :name="token ? 'close' :  'arrow-right'" color="#fff" @click="handleClickIcon"></u-icon>
		</view>

		<!-- u-popup每次都会重新销毁并重新创建 -->
		<u-popup v-model="popupVisible" mode="center">
			<view>
				<u-form :model="form" ref="uForm">
					<u-form-item label="姓名" prop="name">
						<u-input v-model="form.name" />
					</u-form-item>
					<u-form-item label="密码" prop="password">
						<u-input v-model="form.password" />
					</u-form-item>
				</u-form>
				<u-button @click="submit">提交</u-button>
			</view>

		</u-popup>
	</view>
</template>

<script>
	import {
		goBackAfterLogin
	} from '../../util/router.js'
	const defaultAvatar =
		"";

	let hasSetRules = false // 是否已经设置过校验规则

	export default {
		data() {
			return {
				avatar: defaultAvatar,
				name: '',
				token: '',
				popupVisible: false,
				form: {
					name: '',
					password: ''
				},
				rules: {
					name: [{
						required: true,
						message: '请输入姓名',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					password: [{
						required: true,
						message: '请输入密码',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}]
				}
			};
		},
		// 这里写的是小程序页面的生命周期
		onLoad() {
			this.$request({
				url: 'index/index',
				// 用来处理接口成功调用的逻辑
				successCb: (res) => {
					console.log(res)
					// 在这里处理接口返回来的数据
				},

				failCb: () => {
					// 用来处理接口调用失败的逻辑
					console.log('failed')
				}
			})
		},
		onShow() {
			// 在缓存里面找token，找到token表示已经登录，可以拿缓存里的用户信息来渲染
			let token = uni.getStorageSync('token')
			let userInfo = uni.getStorageSync('userInfo')
			if (token && userInfo) {
				let {
					avatar,
					username
				} = userInfo;
				this.name = username
				this.avatar = avatar
				this.token = token
			}
		},
		methods: {
			showPopup() {
				this.popupVisible = true
				this.$nextTick(() => {
					console.log(this.$refs.uForm)
					this.$refs.uForm.setRules(this.rules);
				})
			},
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						console.log('验证通过');
						this.$request({
							url: 'auth/loginByWeb',
							method: 'POST',
							data: {
								username: this.form.name,
								pwd: this.form.password
							},
							successCb: res => {
								console.log(res)
								let {
									token,
									userInfo
								} = res
								let {
									avatar,
									username
								} = userInfo;

								uni.setStorageSync('token', token)
								uni.setStorageSync('userInfo', userInfo)
								// this.$refs.uForm.resetFields() // 微信小程序不支持
								this.form.name = ''
								this.form.password = ''
								this.popupVisible = false
								this.avatar = avatar
								this.name = username
								this.token = token
								goBackAfterLogin()
							}
						})
					} else {
						console.log('验证失败');
					}
				});
			},
			handleClickIcon() {
				if (this.token) {
					// 点击进行退出登录二次确认
					uni.showModal({
						title: '提示',
						content: '是否确认退出登录',
						confirmColor: '#fcf',
						success: (res) => {
							if (res.confirm) {
								console.log('用户点击确定');

								// 清空所有缓存
								uni.clearStorageSync()

								// 恢复初始值
								this.token = ''
								this.name = ''
								this.avatar = defaultAvatar
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				} else {
					this.showPopup()
				}
			}
		}
	}
</script>

<style lang="scss">
	.user_top {
		background: #333;
		color: #fff;
		padding: 40rpx 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.left {
			display: flex;
			align-items: center;

			.text {
				font-size: 26rpx;
				line-height: 3;
				margin-left: 20rpx;
			}
		}
	}

	/deep/ .u-mode-center-box {
		width: 90% !important;
		padding: 50rpx;
	}
</style>
